<template>
  <div>
    <header-top>
      <span class="header_search" slot="left">
        <i class="el-icon-arrow-left icon-sousuo" @click="gotolink"></i>
        <!-- <button @click="goto"></button> -->
      </span>
    </header-top>
    <shop-item :name="header.name" :time="header.time" :src="header.src"></shop-item>
    <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul class="menu-ul">
          <li
            v-for="(item,index) in goods"
            :key="'goods'+index"
            class="menu-item"
            :class="{'current':currentIndex==index}"
            @click="selectMenu(index,$event)"
          >
            <span class="text border-1px">
              <span class="icon" v-show="item.type>0" :class="classMap[item.type]"></span>
              {{item.name}}
            </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper" ref="foodWrapper">
        <ul>
          <li v-for="(item,index) in goods" :key="'goods2'+index" class="food-list food-list-hook">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li
                v-for="(food,index) in item.foods"
                :key="'food'+index"
                class="food-item border-1px"
              >
                <div class="icon">
                  <img :src="food.icon" width="57" height="57" alt />
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{food.price}}</span>
                    <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import ShopItem from '../components/ShopItem'
import HeaderTop from '../components/HeaderTop'
export default {
  name: 'Food',
  components: {
    ShopItem,
    HeaderTop
  },
  data() {
    return {
      goods: [],
      classMap: [],
      listHeight: [],
      scrollY: 0,
      header: {
        name: '米眷粥铺',
        number: 0,
        money: 130,
        time: 50,
        distance: 1.2,
        isDeliver: false,
        src: require('../assets/shop/1.png')
      },
      goods: [
        {
          name: '热销榜',
          type: -1,
          foods: [
            {
              name: '皮蛋瘦肉粥',
              price: 10,
              oldPrice: '',
              description: '咸粥',
              sellCount: 229,
              rating: 100,
              info:
                '一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足',
              icon:
                'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '牛肉馅饼',
              price: 14,
              oldPrice: '',
              description: '',
              sellCount: 114,
              rating: 91,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '招牌猪肉白菜锅贴/10个',
              price: 17,
              oldPrice: '',
              description: '',
              sellCount: 101,
              rating: 78,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '南瓜粥',
              price: 9,
              oldPrice: '',
              description: '甜粥',
              sellCount: 91,
              rating: 100,
              icon:
                'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '红豆薏米美肤粥',
              price: 12,
              oldPrice: '',
              description: '甜粥',
              sellCount: 86,
              rating: 100,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750'
            },

            {
              name: '红枣山药糙米粥',
              price: 10,
              oldPrice: '',
              description: '',
              sellCount: 81,
              rating: 91,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750'
            }
          ]
        },
        {
          name: '精选热菜',
          type: -1,
          foods: [
            {
              name: '菜炖豆腐',
              price: 17,
              oldPrice: '',
              description: '',
              sellCount: 43,
              rating: 92,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '手撕包菜',
              price: 16,
              oldPrice: '',
              description: '',
              sellCount: 29,
              rating: 100,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '香酥黄金鱼',
              price: 11,
              oldPrice: '',
              description: '',
              sellCount: 15,
              rating: 100,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750'
            }
          ]
        },
        {
          name: '精选套餐',
          type: -1,
          foods: [
            {
              name: '红豆薏米粥',
              price: 37,
              oldPrice: '',
              description: '红豆薏米粥,三鲜干蒸烧卖',
              sellCount: 3,
              rating: 100,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '皮蛋瘦肉粥',
              price: 31,
              oldPrice: '',
              description: '',
              sellCount: 12,
              rating: 100,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750'
            }
          ]
        },
        {
          name: '果汁饮料',
          type: -1,
          foods: [
            {
              name: '蜜瓜杯',
              price: 6,
              oldPrice: '',
              description: '',
              sellCount: 1,
              rating: '',
              info: '',
              icon:
                'http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '加多宝',
              price: 6,
              oldPrice: '',
              description: '',
              sellCount: 7,
              rating: 100,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750'
            },
            {
              name: '橙果汁',
              price: 8,
              oldPrice: 10,
              description: '',
              sellCount: 15,
              rating: 100,
              info: '',
              icon:
                'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114',
              image:
                'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750'
            }
          ]
        }
      ]
    }
  },
  props: {
    seller: {
      type: Object
    }
  },
  created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'gurantee']
    this.$nextTick(() => {
      this._initScroll()
      this._calculateHeight()
    })
  },
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i]
        let hegiht2 = this.listHeight[i + 1]
        if (!hegiht2 || (this.scrollY >= height1 && this.scrollY < hegiht2)) {
          return i
        }
      }
      return 0
    },
    selectFoods() {
      let foods = []
      this.goods.forEach(good => {
        good.foods.forEach(food => {
          if (food.count > 0) {
            foods.push(food)
          }
        })
      })
      return foods
    }
  },
  methods: {
    gotolink() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1)

      //指定跳转地址
      this.$router.replace('/home')
    },
    _initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true
      })
      this.foodScroll = new BScroll(this.$refs.foodWrapper, {
        probeType: 3,
        click: true
      })
      this.foodScroll.on('scroll', pos => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    },
    _calculateHeight() {
      let foodList = this.$refs.foodWrapper.getElementsByClassName(
        'food-list-hook'
      )
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    },
    selectMenu(index, event) {
      if (!event._constructed) {
        return
      }
      let foodList = this.$refs.foodWrapper.getElementsByClassName(
        'food-list-hook'
      )
      let el = foodList[index]
      this.foodScroll.scrollToElement(el, 600)
    },
    cardAdds(target) {
      this.$refs.shopCart.drop(target)
    }
  },

  events: {
    'cart.add'(target) {
      this._drop(target)
    }
  }
}
</script>
<style scoped>
.goods {
  display: flex;
  position: absolute;
  top: 174px;
  bottom: 46px;
  width: 100%;
  overflow: hidden;
}
.menu-wrapper {
  flex: 0 0 80px;
  width: 80px;
  background: #f3f5f7;
}
.menu-item {
  display: table;
  vertical-align: middle;
  padding: 0 12px;
  height: 54px;
  width: 56px;
  line-height: 14px;
}
.menu-item.current {
  position: relative;
  z-index: 10;
  margin-top: -1px;
  background: #fff;
  font-weight: 700;
}
.menu-item.current .text {
  border: none;
}
.menu-item .text {
  display: table-cell;
  width: 56px;
  vertical-align: middle;
  font-size: 12px;
}
.menu-item .icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  margin-right: 2px;
  vertical-align: middle;
}
.menu-item .icon.special {
  background-image: url(./special_3@2x.png);
}

ul {
  list-style-type: none;
  padding: 0 0 0 0;
}

.foods-wrapper {
  flex: 1;
}
.foods-wrapper .title {
  padding-left: 14px;
  height: 26px;
  line-height: 26px;
  border-left: 2px solid #d9dde1;
  font-size: 12px;
  color: rgb(147, 153, 159);
  background: #f3f5f7;
}
.food-item {
  display: flex;
  margin: 18px;
  padding-bottom: 18px;
}
.food-item:last-child {
  margin-bottom: 0;
}
.border-1px:last-child {
  border-top: none;
}
.food-item .icon {
  flex: 0 0 57px;
  margin-right: 10px;
}
.food-item .content {
  flex: 1;
}
.food-item .content .name {
  margin: 2px 0 8px 0;
  line-height: 10px;
  font-size: 10px;
  color: rgb(7, 17, 27);
}
.content .desc {
  margin-bottom: 8px;
  line-height: 12px;
  font-size: 10px;
  color: rgb(7, 17, 27);
}
.content .extra {
  line-height: 10px;
  font-size: 10px;
  color: rgb(7, 17, 27);
}
.content .extra .count {
  margin-right: 12px;
}
.price {
  font-weight: 700;
  line-height: 24px;
}
.price .now {
  color: rgb(240, 0, 0);
  margin-right: 8px;
  font-size: 14px;
}
.price .old {
  text-decoration: line-through;
  font-size: 10px;
  color: rgb(147, 153, 159);
}
.cartcontrol-wrapper {
  position: absolute;
  right: 0;
  bottom: 12px;
}
.border-1px {
  position: relative;
}
.border-1px:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgba(7, 17, 27, 0.1);
  content: '';
}
</style>
